圆角表格的制作
发布时间 2010-03-04
做网页常常使用一些技巧，比如在表格的四周加上圆角，这样可以避直接使用表格的直角，而显得过于呆板,很多网友都提到过解决的办法，我们选取最有代表性两种方法来再现圆角表格的制作过程。 第一种制作方法： 1. 做两个圆角的图片，这两个图片可以先做一个图片，然后用photoshop软件垂直翻转一下就行了。 2. 在两个图片中间插入一个背景颜色同图片一样的表格，长度也设为图片的长度，将这个表格的单元间距设为1，其他都为0。 3. 将表格的单元格背景色设置为白色（从2、3两步可以看出这里其实是制作了一个细线边框的表格） 经过这样的处理后表格是不是漂亮多了呢！ 4. 最后我们就可以在表格里面填写内容了，我们可以把这个部分当然一个整体，复制并粘贴到页面上不同的地方，当然你也可以改变整个圆角表格的尺寸，要做的就是改变圆角图片和插入表格的尺寸了。 代码如下： <img height=15 src="/data/userpic/20060823094159.gif" width=125> <br> <table width="124" cellspacing="1" cellpadding="0" bgcolor="#0000FF"> <tr> <td bgcolor="#FFFFFF"＞经过这样的处理后表格是不是漂亮多了呢！</td></tr></table> <img height=13 src="/data/userpic/20060823098287.gif" width=125> 　　说明：其实就是两个圆角图片与一个细线表格组合在一起。 第二种制作方法(推荐用这种，因为要调整表格的宽度时，比较方便)：      1. 准备工作：制作两个小圆角图片，如右图。可以先制作一个，让后用相关软件翻转就可以了 2. 制作一个一行三列的表格。表格的单元间距、单元边距、边框均设置为零。宽度默认为100%，也可以设成固定的宽度，本例设为150像素。 3. 单击“显示隐藏指导方针”按钮，并将第一步的两个小图片分别插入第一、第三单元格。然后选中左边的小图片，再按一下向左的方向键，最后按退格键，将小图片前的一个空格删除。 4. 设置第一个单元格的水平对齐方式为左对齐，垂直对齐方式为顶部，使图片在单元格的左上方，第三个单元格的水平对齐方式为右对齐，垂直对齐方式为顶部，使图片在单元格的右上方。 5. 将每个单元单元格的背景色（注意是单元格）设置为插入的图片颜色相同。 这种表格是不是很眼熟啊？的确，我们可以在很多的大网站找到它的身影。 6. 在下面再插入一个同样边框颜色的细线表格（此步骤省略，如果不会，可参照http://study.51rich.net/web//index.php?action=newshow|study|779|cn|873|7）,现在就可以在细线表格里写入内容了。 代码如下： <table width="150" cellpadding="0" cellspacing="0" border="0"> <tr bgcolor="#7090ff"> <td valign="top" align="left" width="10"><img src="411-w03.gif" width="7" height="7"></td> <td width="127" bgcolor="#7090ff"> </td> <td align="right" valign="top" width="10"><img src="411-w04.gif" width="7" height="7"></td> </tr></table> <table width="150" cellspacing="1" cellpadding="0" border="0" bgcolor="#7090ff"><tr><td bgcolor="#FFFFFF">这种表格是不是很眼熟啊？的确，我们可以在很多的大网站找到它的身影。</td></tr> </table> 　　说明：它由两个单独的表格组成，其中第一个表格是出现圆角的关键！
[ 点击数:] [打印本网页] [关闭本窗口]
相关内容
查无记录